﻿@model CoreHome.Infrastructure.Models.Theme

<link rel="stylesheet" href="~/css/theme/index.min.css" />
<script src="~/js/theme/index.min.js"></script>

<div class="container">

    <form asp-controller="Theme" asp-action="Index" method="post">

        <div class="section">
            <h1 class="display-4">Bgm</h1>
            <br />
            <input class="form-control" asp-for="MusicUrl" autocomplete="off" placeholder="Random Music"/>
        </div>

        <div class="section">
            <h1 class="display-4">Theme</h1>
            <br />
            <div class="row no-gutters">

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="changeTheme('auto')">
                            <div class="overflow-hidden">
                                <img src="https://corehome.oss-accelerate.aliyuncs.com/images/themetype-auto.jpg" />
                            </div>
                            <label>
                                <input class="ThemeType" id="auto" type="radio" name="ThemeType" value="@ThemeType.Auto"
                                       @if (Model.ThemeType == ThemeType.Auto) { Write("checked"); } /> Auto
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="changeTheme('white')">
                            <div class="overflow-hidden">
                                <img src="https://corehome.oss-accelerate.aliyuncs.com/images/themetype-white.jpg" />
                            </div>
                            <label>
                                <input class="ThemeType" id="white" type="radio" name="ThemeType" value="@ThemeType.White"
                                       @if (Model.ThemeType == ThemeType.White) { Write("checked"); } /> White
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="changeTheme('black')">
                            <div class="overflow-hidden">
                                <img src="https://corehome.oss-accelerate.aliyuncs.com/images/themetype-black.jpg" />
                            </div>
                            <label>
                                <input class="ThemeType" id="black" type="radio" name="ThemeType" value="@ThemeType.Black"
                                       @if (Model.ThemeType == ThemeType.Black) { Write("checked"); } /> Black
                            </label>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="section">
            <h1 class="display-4">Background</h1>
            <br />
            <div class="row no-gutters">

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="changeBackground('color')">
                            <div class="overflow-hidden">
                                <img src="https://corehome.oss-accelerate.aliyuncs.com/images/backgroundtype-color.jpg" />
                            </div>
                            <label>
                                <input class="BackgroundType" id="color" type="radio" name="BackgroundType" value="@BackgroundType.Color"
                                       @if (Model.BackgroundType == BackgroundType.Color) { Write("checked"); } /> Color
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="changeBackground('bing')">
                            <div class="overflow-hidden">
                                <img src="https://corehome.oss-accelerate.aliyuncs.com/images/backgroundtype-bing.jpg" />
                            </div>
                            <label>
                                <input class="BackgroundType" id="bing" type="radio" name="BackgroundType" value="@BackgroundType.Bing"
                                       @if (Model.BackgroundType == BackgroundType.Bing) { Write("checked"); } /> Bing
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-3 p-2">
                    <div class="card mb-2 tests-card h-100">
                        <div class="card-body" onclick="selectImage()">
                            <div class="overflow-hidden">
                                <img id="customImg" custom="@OssService.GetBackground()" src="@(
                                    Model.BackgroundType == BackgroundType.Custom ?
                                        $"{@OssService.GetBackground()}?{ new Random().Next() }" :
                                        "https://corehome.oss-accelerate.aliyuncs.com/images/backgroundtype-image.jpg"
                                )" />
                            </div>
                            <label>
                                <input class="BackgroundType" id="custom" type="radio" name="BackgroundType" value="@BackgroundType.Custom"
                                       @if (Model.BackgroundType == BackgroundType.Custom) { Write("checked"); } /> Custom
                                <input id="fileSelector" type="file" onchange="uploadBackground()" hidden />
                            </label>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
    
    <div class="section">
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal" >Apply</button>
    </div>

    <div class="modal fade" id="modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Comfire change theme?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-success" onclick="document.querySelector('form').submit()">Yes</button>
                </div>
            </div>
        </div>
    </div>
</div>
